<script setup>
import ContextMenu from '@/components/ContextMenu.vue'
import { ref } from 'vue'
const menu = ref([
  {
    label: '复制',
    value: 'copy'
  },
  {
    label: '粘贴'
  },
  {
    label: '删除'
  }
])
const menuS = ref([
  {
    label: '复制'
  },
  {
    label: '粘贴'
  }
])
const menuSS = ref([
  {
    label: '复制'
  }
])
const handleSelectL = (item) => {
  console.log(item)
}
</script>

<template>
  <div class="menu">
    <context-menu :menu="menu" @select="handleSelectL">
      <div class="left"></div>
    </context-menu>
    <context-menu :menu="menuS">
      <div class="right">
        <context-menu :menu="menuSS">
          <div class="bot"></div>
        </context-menu>
      </div>
    </context-menu>
  </div>
</template>

<style lang="scss" scoped>
.menu {
  display: flex;
  justify-content: space-around;

  .left {
    width: 45vw;
    height: 50vh;
    background: #e55d50;
  }

  .right {
    position: relative;
    width: 45vw;
    height: 50vh;
    background: #f1b542;

    .bot {
      position: absolute;
      left: 20%;
      bottom: 20%;
      width: 50%;
      height: 50%;
      background: #56bb48;
    }
  }
}
</style>
